<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
    <script src="<%=request.getContextPath()%>/resources/jquery-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/resources/jquery-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
    <style type="text/css">
        .caption img{
            text-align: center;
        }
        img.thumbnail{
            width: 150px;
            height: 120px;
        }
        .bs-callout {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #eee;
            border-left-width: 5px;
            border-radius: 3px;
        }
        .bs-callout h4 {
            margin-top: 0;
            margin-bottom: 5px;
        }
        .bs-callout p:last-child {
            margin-bottom: 0;
        }
        .bs-callout code {
            border-radius: 3px;
        }

        /* Tighten up space between multiple callouts */
        .bs-callout + .bs-callout {
            margin-top: -5px;
        }

        /* Variations */
        .bs-callout-danger {
            border-left-color: #ce4844;
        }
        .bs-callout-danger h4 {
            color: #ce4844;
        }
        .bs-callout-warning {
            border-left-color: #aa6708;
        }
        .bs-callout-warning h4 {
            color: #aa6708;
        }
        .bs-callout-info {
            border-left-color: #1b809e;
        }
        .bs-callout-info h4 {
            color: #1b809e;
        }
    </style>
    <script type="text/javascript">

        var advertId = "";
        $(function(){

            //上传图片
            $("#hiddenFileInput").change(function(){
                $('#uploadProgressDlg').modal('show');
            });
            //图片上传
            $("#hiddenFileInput").fileupload({
                url : contextpath + '/web/advert/uploadFile',
                dataType: 'json',
                formData : function(form){
                    return [{'name':"advertId", "value":advertId}]
                },
                done: function (e, data) {
                    $('#uploadProgressDlg').modal('hide');
                    var file = data.files[0];
                    console.log(data.result);
                    if(data.result.code !== 200){
                        $.messager.alert("提示", "图片上传不成功");
                        return;
                    }
                    $("#picUrl_" + advertId).val(data.result.data.path);
                    $('#img_' + advertId).attr('src', data.result.data.server + data.result.data.path);

                    $('#uploadProgressDlg .progress-percentage').text("-- KB");
                    $('#uploadProgressDlg .progress-bar').css('width', '0%');
                    $(e.target).parent().siblings('p[mark="has-error"]').hide();
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#uploadProgressDlg .progress-percentage').text(data.loaded/1000 + "/" + data.total/1000 + " KB");
                    $('#uploadProgressDlg .progress-bar').css('width', progress + '%');
                }
            }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

        });

        /**
         *
         * @param index
         */
        function selectUploadFile(id){
            advertId = id;
            $('#hiddenFileInput').click();
        }

        function saveAdvert(domId){
            $.ajax({
                url : contextpath + '/web/advert/update',
                type : 'post',
                data : $(domId).find('form').serialize(),
                success :  function(data){
                    if (data.code === 200) {
                        $.messager.alert("提示", "更新成功");
                        petListTable.ajax.reload();
                    } else {
                        $.messager.alert(data.msg);
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="modal fade" id="uploadProgressDlg" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" style="width: 450px;">
        <div class="modal-content">
            <div class="modal-body">
                <div class="contextual-progress">
                    <div class="clearfix">
                        <div class="progress-title">正在上传，请稍后……</div>
                        <div class="progress-percentage">0</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%
    String path = request.getContextPath();
    /*String port = request.getServerPort() == 80? "/":"" + request.getServerPort() + "/";*/
    String basePath = request.getScheme()+"://"+request.getServerName() + path;
%>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>广告列表</h2>
		</div>
        <input type="file" id="hiddenFileInput" style="display: none;">
        <div class="bs-callout bs-callout-info">
            <h4>系统链接说明</h4>
            <p><strong>产品详情链接：</strong>product://{{id}}</p>
            <p><strong>酒店详情链接：</strong>hotel://{{id}}</p>
            <p><strong>商城首页链接：</strong>../shop/shop</p>
            <p><strong>酒店详情链接：</strong>../hotel/hotel</p>
            <p><strong>造型首页链接：</strong>../modelling/modelling</p>
            <p><strong>冲凉首页链接：</strong>../shower/shower</p>
        </div>
        <div class="sub-header">
            <h1><small>首页轮换图片</small></h1>
        </div>
        <div class="row" style="max-width: 1100px; padding-top: 20px;">
            <div class="col-sm-6 col-md-4" id="home_1">
                <div class="thumbnail">
                    <p>首页轮换图片1：</p>
                    <img src="${fileViewServer}${home_1.picUrl}" id="img_${home_1.id}" class="thumbnail" alt="首页轮换图片1" width="150" height="80" onclick="selectUploadFile('${home_1.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${home_1.id}" value="${home_1.picUrl}">
                            <input type="hidden" name="id" value="${home_1.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${home_1.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${home_1.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">宣传语</span>
                                    <input type="text" class="form-control" name="remark" value="${home_1.remark}" placeholder="宣传语">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#home_1')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="home_2">
                <div class="thumbnail">
                    <p>首页轮换图片2：</p>
                    <img src="${fileViewServer}${home_2.picUrl}" id="img_${home_2.id}" class="thumbnail" alt="首页轮换图片2" width="150" height="80" onclick="selectUploadFile('${home_2.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${home_2.id}" value="${home_2.picUrl}">
                            <input type="hidden" name="id" value="${home_2.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${home_2.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${home_2.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">宣传语</span>
                                    <input type="text" class="form-control" name="remark" value="${home_2.remark}" placeholder="宣传语">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#home_2')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="home_3">
                <div class="thumbnail">
                    <p>首页轮换图片3：</p>
                    <img src="${fileViewServer}${home_3.picUrl}" id="img_${home_3.id}" class="thumbnail" alt="首页轮换图片3" width="150" height="80" onclick="selectUploadFile('${home_3.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${home_3.id}" value="${home_3.picUrl}">
                            <input type="hidden" name="id" value="${home_3.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${home_3.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${home_3.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">宣传语</span>
                                    <input type="text" class="form-control" name="remark" value="${home_3.remark}" placeholder="宣传语">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#home_3')">保 存</button></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="sub-header">
            <h1><small>商城首页推荐</small></h1>
        </div>
        <div class="row" style="max-width: 1100px; padding-top: 20px;">
            <div class="col-sm-6 col-md-4" id="shop_1">
                <div class="thumbnail">
                    <p>商城首页大图1：</p>
                    <img src="${fileViewServer}${shop_1.picUrl}" id="img_${shop_1.id}" class="thumbnail" alt="商城首页大图" width="150" height="80" onclick="selectUploadFile('${shop_1.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_1.id}" value="${shop_1.picUrl}">
                            <input type="hidden" name="id" value="${shop_1.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_1.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_1.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_1')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_2">
                <div class="thumbnail">
                    <p>商城首页大图2：</p>
                    <img src="${fileViewServer}${shop_2.picUrl}" id="img_${shop_2.id}" class="thumbnail" alt="商城首页大图" width="150" height="80" onclick="selectUploadFile('${shop_2.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_2.id}" value="${shop_2.picUrl}">
                            <input type="hidden" name="id" value="${shop_2.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_2.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_2.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_2')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_3">
                <div class="thumbnail">
                    <p>商城首页大图1：</p>
                    <img src="${fileViewServer}${shop_3.picUrl}" id="img_${shop_3.id}" class="thumbnail" alt="商城首页大图3" width="150" height="80" onclick="selectUploadFile('${shop_3.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_3.id}" value="${shop_3.picUrl}">
                            <input type="hidden" name="id" value="${shop_3.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_3.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_3.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_3')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_top">
                <div class="thumbnail">
                    <p>商城推荐图片1：</p>
                    <img src="${fileViewServer}${shop_top.picUrl}" id="img_${shop_top.id}" class="thumbnail" alt="商城推荐图片1" width="150" height="80" onclick="selectUploadFile('${shop_top.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_top.id}" value="${shop_top.picUrl}">
                            <input type="hidden" name="id" value="${shop_top.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_top.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_top.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_top')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_left">
                <div class="thumbnail">
                    <p>商城推荐图片2：</p>
                    <img src="${fileViewServer}${shop_left.picUrl}" id="img_${shop_left.id}" class="thumbnail" alt="商城推荐图片2" width="150" height="80" onclick="selectUploadFile('${shop_left.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_left.id}" value="${shop_left.picUrl}">
                            <input type="hidden" name="id" value="${shop_left.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_left.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_left.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_left')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_rightTop">
                <div class="thumbnail">
                    <p>商城推荐图片3：</p>
                    <img src="${fileViewServer}${shop_rightTop.picUrl}" id="img_${shop_rightTop.id}" class="thumbnail" alt="商城推荐图片3" width="150" height="80" onclick="selectUploadFile('${shop_rightTop.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_rightTop.id}" value="${shop_rightTop.picUrl}">
                            <input type="hidden" name="id" value="${shop_rightTop.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_rightTop.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_rightTop.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_rightTop')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="shop_rightBottom">
                <div class="thumbnail">
                    <p>商城推荐图片4：</p>
                    <img src="${fileViewServer}${shop_rightBottom.picUrl}" id="img_${shop_rightBottom.id}" class="thumbnail" alt="商城推荐图片4" width="150" height="80" onclick="selectUploadFile('${shop_rightBottom.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${shop_rightBottom.id}" value="${shop_rightBottom.picUrl}">
                            <input type="hidden" name="id" value="${shop_rightBottom.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${shop_rightBottom.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${shop_rightBottom.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#shop_rightBottom')">保 存</button></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="sub-header">
            <h1><small>酒店首页推荐</small></h1>
        </div>
        <div class="row" style="max-width: 1100px; padding-top: 20px;">
            <div class="col-sm-6 col-md-4" id="room_1">
                <div class="thumbnail">
                    <p>酒店推荐图片1：</p>
                    <img src="${fileViewServer}${room_1.picUrl}" id="img_${room_1.id}" class="thumbnail" alt="酒店推荐图片1" width="150" height="80" onclick="selectUploadFile('${room_1.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${room_1.id}" value="${room_1.picUrl}">
                            <input type="hidden" name="id" value="${room_1.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${room_1.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${room_1.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#room_1')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="room_2">
                <div class="thumbnail">
                    <p>酒店推荐图片2：</p>
                    <img src="${fileViewServer}${room_2.picUrl}" id="img_${room_2.id}" class="thumbnail" alt="酒店推荐图片2" width="150" height="80" onclick="selectUploadFile('${room_2.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${room_2.id}" value="${room_2.picUrl}">
                            <input type="hidden" name="id" value="${room_2.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${room_2.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${room_2.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#room_2')">保 存</button></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4" id="room_3">
                <div class="thumbnail">
                    <p>酒店推荐图片3：</p>
                    <img src="${fileViewServer}${room_3.picUrl}" id="img_${room_3.id}" class="thumbnail" alt="酒店推荐图片3" width="150" height="80" onclick="selectUploadFile('${room_3.id}')">
                    <div class="caption">
                        <form class="form-horizontal" style="padding-left: 20px; padding-right: 20px;">
                            <input type="hidden" name="picUrl" id="picUrl_${room_3.id}" value="${room_3.picUrl}">
                            <input type="hidden" name="id" value="${room_3.id}">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input type="text" class="form-control" name="name" value="${room_3.name}" placeholder="标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">链接</span>
                                    <input type="text" class="form-control" name="linkUrl" value="${room_3.linkUrl}" placeholder="链接">
                                </div>
                            </div>
                        </form>
                        <p><button type="button" class="btn btn-success" onclick="saveAdvert('#room_3')">保 存</button></p>
                    </div>
                </div>
            </div>
        </div>
	</div>

</body>